type Binding = {
    value:{
        wrap?:string
    }
}

const drag = {
    mounted(wrap:HTMLElement,binding:Binding){
        const parentWrap = binding.value.wrap || undefined
        const parent = (parentWrap ? document.querySelector(parentWrap) as HTMLElement : document.body)
        wrap.style.cursor = 'move';
        wrap.onmousedown = (el:MouseEvent)=>{
            const mouseX = el.clientX; 
            const mouseY = el.clientY;
            const domX = wrap.offsetLeft
            const domY = wrap.offsetTop
            const maxX = parent.clientWidth - wrap.offsetWidth;
            const maxY = parent.clientHeight - wrap.offsetHeight;
            document.onmousemove = (e:MouseEvent)=>{
                const deltaX =e.clientX - mouseX;
                const deltaY =e.clientY - mouseY;
                let newX = domX + deltaX;
                let newY = domY + deltaY;

                // 边界
                newX < 0 ? newX = 0 : newX > maxX ? newX=maxX : ''
                newY < 0 ? newY = 0 : newY > maxY ? newY=maxY : ''

                wrap.style.left =newX + 'px';
                wrap.style.top =newY+ 'px';
            };
            document.onmouseup = ()=>{
                document.onmousemove = null;
                document.onmouseup = null;
            };
            return false;
        }
    }
}
export default drag;